let box = document.querySelector('.box');
let imgBoxUl = box.querySelector('.img_box>ul');

//动态生产图片（第一张和最后一张）
console.log(imgBoxUl.firstElementChild.cloneNode(true)); //克隆第一个li
console.log(imgBoxUl.lastElementChild.cloneNode(true)); //克隆最后一个li


//插入克隆后的第一张图片到最后一张后的位置
imgBoxUl.appendChild(imgBoxUl.firstElementChild.cloneNode(true))

//插入克隆后的最后一张图片到第一张前的位置
imgBoxUl.insertBefore(imgBoxUl.children[imgBoxUl.children.length - 2].cloneNode(true), imgBoxUl.firstElementChild)


let index = 1;
//后克隆的第一张瞬间移动到原来第一张照片
// imgBoxUl.style.transform = `translateX(-100%)`;
imgBoxUl.style.transform = `translateX(-${index}00%)`;



box.addEventListener('click', function(event) {
    if (event.target.className == 'arrow_left') {
        arrowLeftFn();
    }

    if (event.target.className == 'arrow_right') {
        arrowRightFn();
    }

    if (event.target.classList.contains('dot')) {
        dotFn();
    }

})

//点击右边事件
function arrowRightFn() {
    index++;
    console.log(index);
    // console.log(imgBoxUl.children.length); //长度是5
    imgBoxUl.style.transform = `translateX(-${index}00%)`;

    if (index == imgBoxUl.children.length - 1) {
        index = 1;

        imgBoxUl.addEventListener('transitionend', function() {
            //清除过度效果，并且ul瞬间从-400%恢复到-100%
            imgBoxUl.style.transition = 'none';
            imgBoxUl.style.transform = `translateX(-${index}00%)`;

            //恢复过度效果
            //获取被计算后的最终样式
            window.getComputedStyle(imgBoxUl, 'style').getPropertyValue('transition');
            imgBoxUl.style.transition = '0.2s ease-in-out'; //如果没有上面 getComputedStyle的操作，到最后一步，会将none覆盖掉
        })
    }
}
//点击左边事件
function arrowLeftFn() {
    index--;
    console.log(index);
    imgBoxUl.style.transform = `translateX(-${index}00%)`;

    // 判断是否是第一张
    if (index == 0) {
        index = imgBoxUl.children.length - 2;

        imgBoxUl.addEventListener('transitionend', function() {
            //清除过度效果，并且ul瞬间从-300%恢复到-100%
            imgBoxUl.style.transition = 'none';
            imgBoxUl.style.transform = `translateX(-${index}00%)`;

            //恢复过度效果
            //获取被计算后的最终样式
            window.getComputedStyle(imgBoxUl, 'style').getPropertyValue('transition');
            imgBoxUl.style.transition = '0.2s ease-in-out'; //如果没有上面 getComputedStyle的操作，到最后一步，会将none覆盖掉
        })
    }
}

//小圆点点击事件
function dotFn(target) {
    //获取自定义属性的值，这个值可以和index对应
    let dataIndex = target.getArribute('data-index');
    //操作的值重新赋值到index，nameindex就可以更新
    index = dataIndex;
    imgBoxUl.style.transform = `translateX(-${index}00%)`;
}